<template>
  <header id="headerBox">
    <div class="project_bg"></div>
    <div class="project_titleBox flex">
      <!-- <div class="title-text title" :data-content="`${site}智慧管理大屏`">
        {{ site ? site : "--" }}智慧管理大屏
      </div> -->
      <slot name="header"></slot>
      <!-- <div
        class="react-right mr-3"
        v-for="(item, index) in routePath"
        :key="item.name"
        :class="activeInx === index ? 'activeBg' : ''"
      >
        <router-link
          ref="tag"
          :to="{ path: item.path }"
          tag="span"
          class="tags-view-item text fw-5"
          @click.native="closeSelectedTag(index)"
        >
          {{ item.meta.title || "" }}
        </router-link>
      </div> -->
    </div>
    <div class="user rowSC">
      <div class="flex flex-ac" v-if="companyFlag">
        <img class="img ml-1" :src="userInfo.url
        ? `/jeecg-boot/fileManage/imageV?fileUrl=${userInfo.url}`
        : avatar
        " />
        <div class="name ml-5 bold">{{ userUnitName }}</div>
        <div class="shu ml-15 mr-15"></div>
      </div>
      <div class="title_box flex flex-c flex-jc" :class="!companyFlag ? 'font_weight' : ''" @click="userDetailsHandle">
        <div class="title_header flex flex-r flex-ac">
          <div class="icon_box">
            <img class="img" :src="userInfo.url
        ? `/jeecg-boot/fileManage/imageV?fileUrl=${userInfo.url}`
        : avatar
        " />
          </div>
          <div class="ml-5 bold">
            {{ userInfo.realname || userInfo.username }}
          </div>
        </div>
        <div class="time">{{ dateInfo.date }} {{ dateInfo.time }}</div>
      </div>
    </div>
    <div class="dateInfo_box rowSC flex flex-jsa">
      <div class="dateInfo_bor flex flex-ac">
        <div class="icon">
          <img :src="iconPng" class="img" />
        </div>
        <div class="year_title">
          {{ timeVal == 0 ? "年" : timeVal == 1 ? "月" : "周" }}视图
        </div>
      </div>
      <div class="icon_darrow" :class="transformFlag ? 'transform0' : 'transform90'">
        <el-icon>
          <DArrowRight />
        </el-icon>
      </div>
      <div class="time_listBox">
        <el-select v-model="timeVal" placeholder="Select" size="large" style="width: 100%"
          @visible-change="timeVisibleChange" @change="timeChange" popper-class="dropdown">
          <el-option v-for="item in timeTxtList" :key="item.value" :value="item.value" class="item flex flex-ac">
            <el-icon>
              <Calendar />
            </el-icon>
            <div class="ml-10">{{ item.label }}</div>
          </el-option>
        </el-select>
        <!-- <div
          class="item flex flex-ac flex-jsa"
          v-for="item in timeTxtList"
          :key="item"
        >
          <el-icon><Calendar /></el-icon>
          <div>{{ item.txt }}</div>
        </div> -->
      </div>
    </div>
    <el-dialog title="个人中心" v-model="dialogVisible" width="70%" draggable align-center destroy-on-close
      class="dialog_content" :before-close="handleClose">
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="dialog_headerBox flex flex-ac pl-20">
            <div class="dialog_iconBox">
              <img class="img" :src="userInfo.url
        ? `/jeecg-boot/fileManage/imageV?fileUrl=${userInfo.url}`
        : avatar
        " />
            </div>
            <div class="dialog_title ml-10">
              <div class="title">{{ userInfo.realname }}</div>
              <div class="val"></div>
            </div>
          </div>
          <div class="dialog_list mt-30">
            <div class="item flex flex-ac" @click="itemActiveBtn(1)" :class="itemActiveInx == 1 ? 'activeBg bold' : ''">
              <el-icon style="font-size: 20px">
                <User />
              </el-icon>
              <div class="pl-10">账号密码</div>
            </div>
            <div class="item mt-10 flex flex-ac" @click="itemActiveBtn(2)"
              :class="itemActiveInx == 2 ? 'activeBg bold ' : ''">
              <el-icon style="font-size: 20px">
                <Lock />
              </el-icon>
              <div class="pl-10">信息设置</div>
            </div>
          </div>
        </el-col>
        <el-col :span="17" class="dialog_rightBox">
          <div class="">
            <div class="dialog_rightHeader bold mb-20">基础设置</div>
            <template v-if="itemActiveInx == 1">
              <el-form :model="form" label-width="80px" label-position="left" class="dialog_form" :rules="rules">
                <el-form-item label="头像" class="mb-20" prop="icon">
                  <div class="dialog_iconBox form_icon">
                    <el-image :src="form.data.avatar
        ? `/jeecg-boot/fileManage/imageV?fileUrl=${form.data.avatar}`
        : avatar
        " class="img">
                      <!-- fit="contain" -->
                      <div slot="error" class="el-image__error image-error">
                        暂无图片
                      </div>
                    </el-image>

                    <!-- <el-upload
                    :before-upload="beforePicUpload"
                    :file-list="showFile"
                    :limit="99"
                    :on-exceed="handleExceed"
                    :on-remove="handleUploadRemove"
                    :on-success="handleUploadSuccess"
                    :show-file-list="false"
                    action="/jeecg-boot/fileManage/upload"
                    class="upload-demo upload-style"
                    ref="thumbnailUpload"
                    :headers="uploadHeaders"
                  >
                    <el-button size="small" type="primary">更替头像</el-button>
                  </el-upload> -->
                  </div>
                </el-form-item>
                <el-form-item label="名称" class="mb-20">
                  <el-input v-model="form.data.realname" autocomplete="off" :focus-background="false"
                    clearable></el-input>
                </el-form-item>
                <el-form-item label="账号" class="mb-20">
                  <el-input v-model="form.data.username" autocomplete="off" :focus-background="false"
                    clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" class="mb-20">
                  <el-input :type="passwordType" auto-complete="on" name="password" placeholder="请输入密码"
                    ref="passwordRef" tabindex="2" v-model="form.data.password" clearable />
                  <span @click="showPwd" class="show-pwd">
                    <el-icon class="svg-container">
                      <View v-if="passwordType === 'password'" />
                      <Hide v-else />
                    </el-icon>
                  </span>
                </el-form-item>
                <el-form-item label="邮箱" class="mb-20">
                  <el-input v-model="form.data.email" autocomplete="off" clearable></el-input>
                </el-form-item>
              </el-form>
            </template>
            <template v-else-if="itemActiveInx == 2">
              <el-form :model="form" label-width="80px" label-position="left">
                <el-form-item label="部门">
                  <el-input v-model="form.data.orgCode" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="角色">
                  <el-input v-model="form.data.post" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="注册日期">
                  <el-input v-model="form.data.birthday" autocomplete="off" clearable></el-input>
                </el-form-item>
              </el-form>
            </template>
          </div>
          <el-button class="mt-30" @click="infoSumbit" style="width: 100%" type="primary">保存</el-button>
        </el-col>
      </el-row>

      <template #footer>
        <div class="dialog-footer flex flex-jsb">

          <el-popconfirm width="220" icon-color="#f56c6c" title="是否确认退出登录" confirm-button-type="danger"
            @confirm="logout()" placement="top" confirm-button-text="确定" cancel-button-text="取消">
            <template #reference>
              <el-button>退出登录</el-button>
            </template>
          </el-popconfirm>


          <div class="footer_box">

            <el-button @click="handleClose">取消</el-button>
            <!-- <el-button type="primary" @click="submitForm">确定</el-button> -->
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- <el-dialog
      title="修改头像"
      v-model="avatarDialog"
      width="30%"
      center
      :before-close="clickAvatarDialog"
    >
      <div style="text-align: center">
        <el-upload
          class="avatar-uploader"
          action="/jeecg-boot/fileManage/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :headers="headers"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="imageUrl"
            :src="`/jeecg-boot/fileManage/imageV?fileUrl=` + imageUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="mini" @click="avatarDialog = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="avatarSubmit">
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog> -->
  </header>
</template>

<script lang="ts" setup>
import {
  onBeforeMount,
  onBeforeUnmount,
  reactive,
  ref,
  computed,
  watch,
  onMounted,
  nextTick,
  watchEffect,
} from "vue";
import { Common } from "@/utils/common";
import { getClock } from "@/api/RoadGate";
import { useStore } from "vuex";
import {
  getUserInfo,
  getUserUnitName,
  setTotalDate,
  getTotalDate, removeToken
} from "@/utils/auth";

import {
  addUserinfo
} from '@/api/user'
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();

const store = useStore();

const dateInfo = reactive<Idate>({
  date: "",
  day: "",
  time: "",
});
const rules = reactive({
  icon: [{ required: true, message: "请上传头像", trigger: "blur" }],
});
const form = reactive({ data: {} });
const routePath = ref([]);
const itemActiveInx = ref(1);
// const activeInx = ref(0);
const avatar = new URL("@/assets/img/header/avatar.png", import.meta.url).href;
const iconPng = new URL("@/assets/img/svg/yearView.svg", import.meta.url).href;
const props = defineProps<{ showIframe?: (type: 1 | 2) => void }>();

const weather = reactive({
  degrees: 23,
  degreesSize: "17-23",
  pm: 2.5,
  icon: "",
});
// timeType 0年 1月 2周
const timeVal = ref(0);
const timeTxtList = reactive([
  {
    label: "年视图",
    value: 0,
  },
  {
    label: "月视图",
    value: 1,
  },
  {
    label: "周视图",
    value: 2,
  },
]);
const userInfo = ref<any>({});
const userUnitName = ref("");
let passwordType = ref("password");
let timer = ref<NodeJS.Timer>();
let passwordRef = ref(null);
try {
  userInfo.value = JSON.parse(getUserInfo());
  form.data = JSON.parse(getUserInfo());
  console.log("用户信息", userInfo.value, form.data);
} catch (err) { }
try {
  userUnitName.value = getUserUnitName();
  console.log("用户信息", userUnitName.value);
} catch (err) { }

const interval = () => {
  return setInterval(() => {
    const { date, time, day } = Common.getDate();
    dateInfo.date = date;
    dateInfo.time = time;
    dateInfo.day = day;
  }, 50);
};
const screenWidth = ref(window.innerWidth);
const companyFlag = ref(true);
let dialogVisible = ref(false);
let transformFlag = ref(false);
// const site = ref<any>();
watchEffect(() => {
  const handleResize = () => {
    resizeInit();
    screenWidth.value = window.innerWidth;
  };
  window.addEventListener("resize", handleResize);
  return () => {
    window.removeEventListener("resize", handleResize);
  };
});
onMounted(() => {
  nextTick(() => {
    resizeInit();
  });
});
onBeforeMount(async () => {
  timer.value = interval();
  // await renderWeather()
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
const resizeInit = () => {
  if (window.innerWidth <= 1328) {
    companyFlag.value = false;
  } else {
    companyFlag.value = true;
  }
};
const showPwd = () => {
  passwordType.value = passwordType.value === "password" ? "" : "password";
  nextTick(() => {
    passwordRef.value && passwordRef.value.focus();
  });
};
const itemActiveBtn = (inx) => {
  itemActiveInx.value = inx;
};
// 点击用户详情
const userDetailsHandle = () => {
  dialogVisible.value = true;
};
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
};
const submitForm = () => { };
// 时间选择visible-change
const timeVisibleChange = (e) => {
  transformFlag.value = e;
};
// 时间选择change
const timeChange = (e) => {
  console.log(1212, e);
  setTotalDate(e);
  store.commit("TABLE_DATE", e);
  console.log("获取 Cookie 时间 值", getTotalDate());
};
const logout = async () => {
  // 退出登陆
  await store.dispatch('user/logout')
  store.commit("SET_TOKEN", "");
  removeToken();
  setTimeout(() => {
    router.push(`/login?redirect=${route.fullPath}`);
  }, 800)
}

// 修改用户信息
const infoSumbit = async () => {
  let data = {}
  if (itemActiveInx.value == 1) {
    let data = {
      // ...this.userInfo.userInfo,
      // userInfo: this.formData,
      // region: JSON.stringify(this.formData.region)
    }
  } else {

  }
  let res = await addUserinfo(data)
  console.log(1111, res);
  return
  if (res.code === 200) {
    // this.$message.success('更新成功');
  } else {
    // this.$message.error(res.message);
  }
}
</script>

<style scoped lang="scss">
#headerBox {
  display: flex;
  justify-content: space-between;
  padding: 0 14px 0 10px;
  box-sizing: border-box;
  // margin-bottom: 10px;
  position: relative;
  color: #cfcfcf;
  background: #fff;
  height: 78px;
  // position: fixed;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  box-shadow: 1px 2px 7px 2px #e9e8e8;

  .project_bg {
    width: 100%;
    height: 78px;
    /* 设置容器的高度 */
    position: absolute;
    top: 3px;
    right: 0;
    // background: url("@/assets/img/header/header-box1.png") no-repeat top
    //   center/cover;

    background-image: url("@/assets/img/header/header-box2.png");
    /* 替换为你的图片路径 */
    background-size: 100% 50px;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .project_titleBox {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
  }

  .title-text {
    font-size: 1.8em;
    letter-spacing: 3px;
    position: relative;
    text-align: center;
    line-height: 1.5;
  }

  .user {
    font-size: 1em;
    padding-bottom: 6px;

    .name {
      text-align: right;
      font-size: 1.5em;
      color: #403d70;
    }

    .img {
      width: 3em;
      height: 3em;
      border-radius: 0.5em;
    }

    .shu {
      width: 1.5px;
      height: 28px;
      background-color: rgb(158, 158, 158);
    }

    .title_box {
      color: #101010;
      cursor: pointer;
      z-index: 99;

      .title_header {}

      .icon_box {
        width: 1.6em;
        height: 1.6em;
        border-radius: 0.12em;
        margin-bottom: 3px;
        margin-right: 2px;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .font_weight {
      font-size: 17px;
      margin-left: 12px;
    }
  }

  .dateInfo_box {
    position: relative;
    width: 9%;
    min-width: 50px;
    max-width: 136px;
    height: 42px;
    font-size: 1em;
    margin-top: 26px;
    border-radius: 50px;
    border: 1.2px solid #9b9a9a;
    padding: 2px 2px 2px 2px;
    color: #403d70;
    font-weight: 550;

    .dateInfo_bor {
      padding-bottom: 4px;
      border-bottom: 2px solid #403d70;
    }

    .icon {
      width: 18px;
      height: 18px;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .year_title {
      font-size: 14px;
      margin-left: 7px;
      padding-top: 2px;
    }

    .icon_darrow {
      font-weight: bold;
      font-size: 18px;
    }

    .transform0 {
      transform: rotate(90deg);
    }

    .transform90 {
      transform: rotate(-90deg);
    }

    .time_listBox {
      position: absolute;
      top: 0;
      left: 2px;
      width: 96%;
      min-width: 40px;
      opacity: 0;
    }
  }

  .dialog_content {
    .dialog_headerBox {}

    .dialog_iconBox {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin-bottom: 3px;
      margin-right: 2px;
      overflow: hidden;
      border: 1px solid #ccc;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .dialog_list {
      color: #333333;
      font-size: 15px;

      .item {
        padding: 12px 20px;
        border-radius: 4px;
      }

      .activeBg {
        background: #f1f5f8;
      }
    }

    .dialog_rightBox {
      height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .dialog_rightHeader {
        font-size: 18px;
      }

      .form_icon {
        width: 62px;
        height: 62px;
        margin-left: 20px;
      }

      .dialog_form {
        position: relative;
      }

      .show-pwd {
        position: absolute;
        right: 30px;
        top: 8px;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
      }
    }
  }

  // .title-text:after {
  // 	content: attr(data-content);
  // 	color: transparent;
  // 	position: absolute;
  // 	top: 0;
  // 	left: 0;
  // 	clip-path: ellipse(12rem 10rem at -0% 50%);
  // 	-webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
  // 	animation: spotlight 10s infinite;
  // 	background-image: url("@/assets/index/titleBg.jpg");
  // 	// background-image: url();
  // 	// background-image: linear-gradient(to top, #ffff00, #ffaa00);
  // 	background-size: 100% 100%;
  // 	background-position: center center;
  // 	background-clip: text;
  // 	-webkit-background-clip: text;
  // }

  // @keyframes spotlight {
  //   0% {
  //     clip-path: ellipse(12rem 10rem at -0% 50%);
  //     -webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
  //   }
  //   50% {
  //     clip-path: ellipse(12rem 10rem at 100% 50%);
  //     -webkit-clip-path: ellipse(12rem 10rem at 100% 50%);
  //   }
  //   100% {
  //     clip-path: ellipse(12rem 10rem at 0% 50%);
  //     -webkit-clip-path: ellipse(12rem 10rem at -0% 50%);
  //   }
  // }
}

.dropdown {

  // background: linear-gradient(248deg, #3c556a 0%, #173046 100%);
  // color: #a2d5e5;
  // border: 1px solid #5e7788;
  // box-sizing: border-box;
  .el-select-dropdown__item {
    // color: #a2d5e5;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #483c68 !important;
    // box-shadow: 0px 0px 78px rgba(1, 194, 255, 0.4) inset;
    color: #fff;
  }
}
</style>